
<style lang="less">
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

.box {
  padding: 15px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
.auth {
  &-banner {
    background: #2e73ff;
    height: 180px;
    &__title {
      fong-size: 36px;
      color: white;
      text-align: center;
      padding-top: 60px;
    }
  }
  &-box {
    margin: -60px 20px 10px 20px;
    background: white;
  }
  &-form {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    .weui-cells {
      margin-top: 0;
    }
    &__item {
      transition: all 0.5s;
    }
  }
  &-protocol {
    .weui-cell {
      padding-left: 0;
    }

    &__file {
      color: #2e73ff;
    }
    &__txt {
      color: #666;
    }
  }
  &-tips {
    margin-top: 30px;
    font-size: 13px;
    line-height: 26px;
    color: #999;
  }
}
</style>
<template>

  <div class="auth">

    <div class="auth-banner">
      <h3 class="auth-banner__title">
        网银
      </h3>
    </div>

    <box class="auth-box">

      <div class="auth-form">

        <tab>
          <tab-item v-for="(item, index) in entrys" :key="index" :selected="index==tabIndex" @on-item-click="tabIndex=index">
            {{item.label}}
          </tab-item>
        </tab>
        <group class="auth-form__item" v-for="(item, index) in entrys" :key="index" v-show="index==tabIndex">
          <x-input v-for="(item, index) in item.parameters" :key="index" :title="item.label" placeholder="" novalidate :show-clear="false"></x-input>
        </group>
      </div>

      <div class="auth-protocol">
        <cell grid>
          <div class="auth-protocol__title" slot="title">
            <check-icon :value.sync="isAgree" type="plain">
              <span class="auth-protocol__txt">同意</span>
            </check-icon>
            <span class="auth-protocol__file" @click="showProtocol=true">《网银数据授权协议》</span>
          </div>
          <!-- <div class="auth-protocol__right" slot="child">常见问题</div> -->
        </cell>
      </div>

      <x-button :disabled="!isAgree" type="primary" :show-loading="false" :gradients="['#1D62F0', '#19D5FD']" @click.native="submit">提交</x-button>

      <div class="auth-tips">
        <div class="auth-tips__title">温馨提示：</div>
        <div class="auth-tips__txt">请确保您的账号已开通网银，并输入正确的账号密码。</div>
        <div class="auth-tips__txt">多次输入错误会导致账号被冻结。</div>
        <div class="auth-tips__txt">银行客服电话：95566</div>
      </div>
    </box>

    <!-- 协议 -->
    <protocol v-if="showProtocol" @hideProtocol="hideProtocol"></protocol>
  </div>
</template>

<script>
import {
  XInput,
  Group,
  XButton,
  Cell,
  CheckIcon,
  Box,
  Tab,
  TabItem,
  Swiper,
  SwiperItem
  // PopupPicker
} from 'vux';
import Protocol from './protocol';
export default {
  components: {
    XInput,
    XButton,
    Group,
    Cell,
    CheckIcon,
    Box,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Protocol
    // PopupPicker
  },
  data() {
    return {
      showProtocol: false,
      tabIndex: 0,
      isAgree: false, // 同意协议
      entrys: [
        //登录方式 选项
        {
          label: '银行卡号', //展示文案，只有一个登录方式时，label为空
          idx: '1', //排序编号
          parameters: [
            //登录输入参数
            {
              reg: '^[^\\s　]{1,30}$', //输入框项的正则表达式
              hint: '请输入银行卡', //输入框内提示文案
              name: 'id', //字段名
              label: '银行卡号', //输入框前文案
              idx: '1', //排序编号
              type: 'text', //输入框类型，text表示文本
              value: ''
            },
            {
              reg: '^[^\\s　]{1,30}$',
              hint: '请输入登录密码(8-23位的数字字母组合)',
              name: 'password',
              label: '密码',
              idx: '2',
              type: 'password', //输入框类型，password表示密码，需要加密密码
              value: ''
            }
          ],
          entryId: '01000701' //登陆入口id
        },
        //登录方式 选项
        {
          label: '身份证号', //展示文案，只有一个登录方式时，label为空
          idx: '2', //排序编号
          parameters: [
            //登录输入参数
            {
              reg: '^[^\\s　]{1,30}$', //输入框项的正则表达式
              hint: '请输入身份证号', //输入框内提示文案
              name: 'id', //字段名
              label: '身份证号', //输入框前文案
              idx: '1', //排序编号
              type: 'text', //输入框类型，text表示文本
              value: ''
            },
            {
              reg: '^[^\\s　]{1,30}$',
              hint: '请输入登录密码(8-23位的数字字母组合)',
              name: 'password',
              label: '密码',
              idx: '2',
              type: 'password', //输入框类型，password表示密码，需要加密密码
              value: ''
            }
          ],
          entryId: '01000701' //登陆入口id
        }
      ]
    };
  },
  methods: {
    onItemClick(index) {
      console.log('on item click:', index);
    },
    submit() {
      console.log(123);
    },
    hideProtocol() {
      this.showProtocol = false;
    }
  },
  mounted() {
    this.$nextTick(() => {
      let cur = document.querySelectorAll('.vux-no-group-title')[0];
      console.log(cur);
      let curHeight = cur.style.height;
      console.log(curHeight);
    });
  }
};
</script>